<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--head部分-->
<!--<head th:include="layout :: htmlhead" th:with="title='后台管理'">-->
<head th:fragment="htmlhead">
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <meta name="renderer" content="webkit" />
    <title>后台管理系统</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css"></link>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px" id="btn">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-inline">
                                <!--注意此处input标签里的id-->
                                <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <!--注意此处button标签里的type属性-->
                            <button type="button" class="layui-btn layui-btn-primary"  data-type="reload" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <!--注意此处table标签里的id-->
        <table class="layui-table layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
</body>

<script th:inline="none" >
    layui.use(['jquery', 'form', 'table', 'layer', 'tree'], function () {
        var	$ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            tree = layui.tree;

        var tableIns = table.render({
            elem: '#test',		//对应table标签里的id
            url:'/test/list',	//从后台获取数据的url
            id:'test',			//此处也需要设置这个属性，后边会用到
            toolbar: '#toolbarDemo',
            method:'post',
            dataType:'json',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],

            //用于对返回的数据格式的自定义，如：

            response: {
                statusName: 'status' //成功的状态码，默认：code
                ,statusCode: 0
                ,msgName: 'hint' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'rows' //数据列表的字段名称，默认：data
            },
            cols:[[
                { type:"numbers", width:15, align:"center"},
                { type:"checkbox", width:35, align: "center" },
                { field:'name',title:'角色名称',width:'20%', align: "center"},
                { field:'remark',title:'角色备注',width:'45%', align: "center"},
                { title:'权限操作',align: "center",
                    templet:function(d){
                        var test = '<a href="#" class="fa fa-check-square-o" οnclick="selectAuthority('+d.id+')">编辑权限</a>';
                        return test;
                    }},
            ]],
            limit:6,		//默认6条数据一页
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
                ,limits:[6,10,15]
                ,first: false //不显示首页
                ,last: false //不显示尾页
            },
            skin: 'line'
        });
        //以下是搜索框进行监测
        var active = {
            reload: function(){
                var demoReload = $('#demoReload');	//得到搜索框里已输入的数据
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        name:  demoReload.val()		//在表格中进行搜索
                    }
                });
            }
        };

        $('#btn .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</html>